<template>
  <div>
    <myDisplayWrap breadcrumbs="详情">
      <a-row class="userBox">
        <div class="titleBar">
          <span>详情</span>
          <div>
            <a-button type="primary" v-if="detail.status == '2'" @click="stop">项目终止</a-button>
            <a-button @click="goBack">返回</a-button>
          </div>
        </div>
        <div>
          <a-tabs :activeKey="activeDescKey" @change="changeDesc">
            <a-tab-pane key="info" tab="项目信息">
              <sourcingInfo ref="sourcingInfo" @getDetail="getDetail" type="detail"></sourcingInfo>
            </a-tab-pane>
            <a-tab-pane key="supplier" tab="供应商报价信息">
              <supplierInfo  ref="supplierInfo"></supplierInfo>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-row>
    </myDisplayWrap>
    <sourcing-close :show="showClose" :loading="confirmLoading" @ok="handleClose"
      @cancel="cancelClose"></sourcing-close>

  </div>

</template>

<script>
import myDisplayWrap from './components/myDisplayWrap.vue'
import sourcingInfo from './components/sourcingInfo.vue'
import supplierInfo from './components/supplierInfo.vue'
import sourcingClose from './components/Close.vue'
import { abortedSourcingInfo } from "@/api/sourcing/index.js";


import moment from 'moment'

export default {
  components: {
    myDisplayWrap,
    sourcingInfo,
    supplierInfo,
    sourcingClose
  },
  data() {
    return {
      activeDescKey: 'info',
      id: '',
      detail: {},
      showClose: false,
      confirmLoading: false
    }
  },
  mounted() {
    this.id = this.$route.query.id
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    handleClose(value) {
      this.confirmLoading = true
      abortedSourcingInfo({
        id:this.id,
        terminationReason: value.closeReason
      }).then(res => {
      this.confirmLoading = false

        if (res.code == 0) {
          this.$message.success('成功终止');
          this.showClose = false
          this.$refs.sourcingInfo.getDetail()
          this.$refs.supplierInfo.getDetail()
        }
      }).catch(err => {
      this.confirmLoading = false

      })
    },
    cancelClose() {
      
      this.showClose = false

    },
    stop() {
      this.showClose = true
    },
    changeDesc(val) {
      this.activeDescKey = val
      console.log(this.$refs.sourcingInfo.form)
    },
    getDetail(detail) {
      this.detail = detail
    }
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.userBox {
  padding: 0 24px;
  border-left: 4px solid #cccccc54;
  margin-left: -1px;
  min-height: 650px;
}

.titleBar {
  width: 100%;
  height: 50px;
  line-height: 30px;
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
  border-bottom: 1px dashed #ccc;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
</style>